<!DOCTYPE html>
<html lang="en">
<head>
    <title>酒店标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!-- width=device-width：宽度等于屏幕宽度。user-scalable：静止缩放。缩放比例：1.0 -->
    <meta name="x5-orientation" content="portrait"/> <!-- 腾讯X5浏览器下强制竖屏显示 -->
    <meta name="screen-orientation" content="portrait"> <!-- UC浏览器下强制竖屏显示 -->
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_nen6m7ottuj9vn29.css"> <!-- 图标库 -->
    <script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8" async defer></script><!-- 兼容HTML5标签 -->
    <!-- 根据屏幕宽度换算rem值 -->
    <script type="text/javascript" charset="utf-8"> 
        (function() {
             document.addEventListener('DOMContentLoaded', function () {
                var deviceWidth = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = deviceWidth / 16 + 'px';  // 320/16=20px,1rem = 20px
            }, false);

            window.onresize = function(){
                var deviceWidth = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = deviceWidth / 16 + 'px';
            };
        })()
    </script>
</head>
<body>
<main class="hotel">
    <!-- 头部图片 -->
    <div class="hotel-c-pic"></div>

    <!-- 酒店名称 -->
    <div class="hotel-title">
        <div class="x1">
            <div class="name">
                <div><span class="price">¥2880</span>/桌起</div>
                <h1>苏宁环球套房饭店</h1>
            </div>
        </div>

        <div class="promotion">
            <a href=""><span class="icon">订单礼</span>通过手机预订该酒店，立返5000元现金大礼包</a>
        </div>

        <div class="x1">
            <div class="tag">
                <div class="title">核心卖点</div>
                <ul class="content">
                    <li><a href="#">星级酒店</a></li>
                    <li><a href="#">地铁沿线</a></li>
                    <li><a href="#">大厅无柱</a></li>
                    <li><a href="#">独立门头</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 酒店宴会厅 -->
    <div class="hotel-hall p-c-box">
        <div class="title">宴会厅(2)</div>
        <ul class="content">
            <li>
                <a href="#">
                    <img src="img/temp2.jpg">
                    <h2>凯旋厅 3F</h2>
                    <p>起订:20桌&nbsp;&nbsp;&nbsp;&nbsp;容纳:30桌<br />层高:5.0m&nbsp;&nbsp;&nbsp;&nbsp;柱子:无</p>
                </a>
            </li>

            <li>
                <a href="#">
                    <img src="img/temp2.jpg">
                    <h2>凯旋厅 3F</h2>
                    <p>起订:20桌&nbsp;&nbsp;&nbsp;&nbsp;容纳:30桌<br />层高:5.0m&nbsp;&nbsp;&nbsp;&nbsp;柱子:无</p>
                </a>
            </li>
        </ul>
    </div>

    <!-- 酒店菜单-->
    <div class="hotel-menu p-c-box">
        <div class="title">婚宴菜单(2)</div>
        <ul class="content">
            <li>
                <a href="#">¥3699元/桌<i class="icon iconfont icon-jiantou"></i></a>
            </li>

            <li>
                <a href="#">¥3999元/桌<i class="icon iconfont icon-jiantou"></i></i></a>
            </li>

            <li>
                <a href="#">¥4299元/桌<i class="icon iconfont icon-jiantou"></i></i></a>
            </li>

            <li>
                <a href="#">¥5499元/桌<i class="icon iconfont icon-jiantou"></i></i></a>
            </li>

        </ul>
    </div>

   <!-- 关于此酒店-->
    <div class="hotel-about p-c-box">
        <div class="title"><i class="icon iconfont icon-jiudian"></i>关于此酒店</div>
        <div class="content">
            南京中心大酒店位于南京繁华商业中心——新街口，是一座装修典雅、设施完善的涉外豪华酒店。酒店建筑面积3.8万平方米，拥有客房、餐饮、健身、美容、购物等众多服务设施及举办各类大型会议、宴会的专用设备，是南京最早的高星级酒店之一，也曾是中国酒店业管理人员培训的重要基地。
            <ul class="other">
                <li><h6>服务费</h6>：无</li>
                <li><h6>停车位</h6>：有</li>
                <li><h6>草坪</h6>：无</li>
                <li><h6>婚房</h6>：有</li>
                <li><h6>客房</h6>：有</li>
                <li><h6>化妆间</h6>：有</li>
            </ul>
        </div>
    </div>

    <!-- 酒店交通 -->
    <div class="hotel-traffic p-c-box">
        <div class="title"><i class="icon iconfont icon-qiche"></i>交通周边</div>
        <div class="content">地铁：1（3号口出）、2号线（1号口出）<br />公交：1、60、68、29、34（新街口站下）</div>
        <a href="#" class="daohang"><i class="icon iconfont icon-jiantou"></i><span class="btn">使用导航</span><i class="icon iconfont icon-zuobiao"></i>中央路329号</a>
        <div class="map"></div>
    </div>

    <!-- 布置推荐 -->
    <div class="hotel-wedding p-c-box">
        <div class="title">酒店婚礼布置</div>
        <ul class="content">
            <li><img src="img/temp3.jpg"></li>
            <li><img src="img/temp3.jpg"></li>
            <li><img src="img/temp3.jpg"></li>
            <li><img src="img/temp3.jpg"></li>
        </ul>
    </div>

    <!-- 同类型推荐 -->
    <div class="hotel-same p-c-box">
        <div class="title">同类型推荐</div>
        <ul class="content">
            <li>
                <div class="price">¥2199起</div>
                <a href="#">
                    <img src="img/temp2.jpg">
                    <h2>中心大酒店</h2>
                    <p>户外婚礼  建邺区<br />容纳：36桌</p>
                </a>
            </li>

            <li>
                <div class="price">¥2199起</div>
                <a href="#">
                    <img src="img/temp2.jpg">
                    <h2>中心大酒店</h2>
                    <p>户外婚礼  建邺区<br />容纳：36桌</p>
                </a>
            </li>
        </ul>
    </div>

    <!-- 酒店评论 -->
    <div class="hotel-commend p-c-box">
        <div class="title">用户评论(7)</div>
            <ul class="content">
                <li>
                    <div class="pic"><img src="img/temp4.jpg"></div>
                    <div class="pic-cc">
                        <div class="name">匿名用户</div>
                        <div class="text">很开心能参加好姐妹的婚礼，五星级就要上高端大气上档次啊，衷心祝福她…</div>
                        <div class="imgbox">
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="pic"><img src="img/temp4.jpg"></div>
                    <div class="pic-cc">
                        <div class="name">匿名用户</div>
                        <div class="text">很开心能参加好姐妹的婚礼，五星级就要上高端大气上档次啊，衷心祝福她…</div>
                        <div class="imgbox">
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="pic"><img src="img/temp4.jpg"></div>
                    <div class="pic-cc">
                        <div class="name">匿名用户</div>
                        <div class="text">很开心能参加好姐妹的婚礼，五星级就要上高端大气上档次啊，衷心祝福她…</div>
                        <div class="imgbox">
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                            <a href="#"><img src="img/temp5.jpg"></a>
                        </div>
                    </div>
                </li>
            </ul>
            <a href="#" class="more">查看全部7条评价<i class="icon iconfont icon-jiantou"></i></a>
    </div>
</main>
<footer class="yuyue">
    <div class="content">
        <a href="#"><i class="icon iconfont icon-comment31"></i>在线咨询</a>
        <a href="#"><i class="icon iconfont icon-dianhua"></i>联系商家</a>
        <a href="#" class="sbtn">查询档期</a>
        <a href="#" class="ybtn">预约到店</a>
    </div>
</footer>
</body>
</html>
